<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <el-table
                :data="medalList"
                style="width: 100%">
            <el-table-column
                    type="index"
                    label="顺序"
                    width="50">
            </el-table-column>
            <el-table-column
                    label="NOC"
                    width="180">
                <template slot-scope="scope">
                    <img :src="scope.row.url" width="22" height="15">
                    {{scope.row.name}}
                </template>
            </el-table-column>
            <el-table-column
                    prop="country"
                    label="国家编码"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="gold"
                    label="金牌数"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="silver"
                    label="银牌数"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="bronze"
                    label="铜牌数"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="total"
                    label="总数"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="ranking"
                    label="排名"
                    width="150">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
        <el-dialog title="数据维护" :visible.sync="dialogEditFormVisible">
            <el-form :model="editFormData">
                <el-form-item label="NOC" :label-width="formLabelWidth">
                    <img :src="editFormData.url" width="22" height="15"/>{{editFormData.name}}
                </el-form-item>
                <el-form-item label="金牌数" :label-width="formLabelWidth">
                    <el-input v-model="editFormData.gold"></el-input>
                </el-form-item>
                <el-form-item label="银牌数" :label-width="formLabelWidth">
                    <el-input v-model="editFormData.silver"></el-input>
                </el-form-item>
                <el-form-item label="铜牌数" :label-width="formLabelWidth">
                    <el-input v-model="editFormData.bronze"></el-input>
                </el-form-item>
                <el-form-item label="总数" :label-width="formLabelWidth">
                    <el-input v-model="editFormData.total"></el-input>
                </el-form-item>
                <el-form-item label="排名" :label-width="formLabelWidth">
                    <el-input v-model="editFormData.ranking"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogEditFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="editMedal">确 定</el-button>
            </div>
        </el-dialog>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                medalList:[],
                page:1,
                pagesize:10,
                total:100,
                dialogEditFormVisible:false,
                formLabelWidth: '120px',
                editFormData:{}
            },
            methods:{
                findPage(){
                    axios.get("/medal/"+this.page+"/"+this.pagesize).then(res=>{
                        if(res.data.flag){
                            this.medalList = res.data.data.list;
                            this.total = res.data.data.total;
                        }else{
                            this.$message.error(res.data.msg);
                        }
                    })
                },
                handleSizeChange(val) {
                    this.pagesize = val;
                    this.findPage();
                },
                handleCurrentChange(val) {
                    this.page = val;
                    this.findPage();
                },
                handleEdit(index, row) {
                    this.dialogEditFormVisible = true;
                    this.editFormData = row;
                },
                editMedal(){
                    //TODO:完成发送修改请求和数据
                }
            },
            created(){
                this.findPage();
            }
        });
    </script>
</body>
</html>